<template>
  <div class="permissions">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ height: '48px' }"
      height="calc( 100vh - 110px)"
    >
      <el-table-column fixed="left" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
      <el-table-column fixed prop="Id" label="ID" width="150" />
      <el-table-column prop="RoleCode" label="编码" width="150" />
      <el-table-column prop="RoleName" label="姓名" width="150" />
    </el-table>
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 权限管理控制 -->
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[]"
        :default-checked-keys="[1, 3, 4, 5, 7, 8, 9]"
        :props="defaultProps"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  API_GET_USER_LIST,
  API_USER_NEW,
  API_GET_XG,
  API_GET_SC,
} from "../../api/system";
export default {
  name: "",
  data() {
    return {
      msg: "角色权限",
      labelPosition: "right",
      dialogVisible: false, // 修改模块显示隐藏
      tableData: [],
      /*
       *
       */
      inputcode: "",
      /* 权限控制多选框 */
      data: [
        {
          id: 1,
          label: "基本信息管理",
          children: [
            {
              id: 10,
              label: "参保补贴设置",
            },
            {
              id: 11,
              label: "年度平均工资记录",
            },
            {
              id: 12,
              label: "基准补贴年限设置",
            },
          ],
        },
        {
          id: 2,
          label: "人员信息管理",
          children: [
            {
              id: 15,
              label: "项目信息导入",
            },
            {
              id: 16,
              label: "人员信息管理",
            },
            {
              id: 17,
              label: "人员信息申请",
            },
            {
              id: 18,
              label: "人员信息更改",
            },
            {
              id: 19,
              label: "银行卡号批量更新",
            },
          ],
        },
        {
          id: 3,
          label: "账户管理",
          children: [
            {
              id: 20,
              label: "账户信息管理",
            },
            {
              id: 21,
              label: "账户支出申请",
            },
            {
              id: 22,
              label: "账户信息管理（其他）",
            },
            {
              id: 23,
              label: "账户信息管理（职保）",
            },
            {
              id: 24,
              label: "账户信息管理（城居保）",
            },
          ],
        },
        {
          id: 4,
          label: "支出管理",
          children: [
            {
              id: 25,
              label: "账户支出登记（职保）",
            },
            {
              id: 26,
              label: "账户支出申请",
            },
            {
              id: 27,
              label: "账户结算登记（职保）",
            },
            {
              id: 28,
              label: "账户结算申请（职保）",
            },
            {
              id: 29,
              label: "账户结算申请（城居保）",
            },
          ],
        },
        {
          id: 5,
          label: "业务审核",
          children: [
            {
              id: 30,
              label: "人员信息审核",
            },
            {
              id: 31,
              label: "账户计息审核",
            },
            {
              id: 32,
              label: "账户支出审核",
            },
            {
              id: 33,
              label: "账户结算审核",
            },
            {
              id: 34,
              label: "账户调整审核",
            },
            {
              id: 35,
              label: "人员信息更改审核",
            },
          ],
        },
        {
          id: 6,
          label: "制单管理",
          children: [
            {
              id: 36,
              label: "账户补贴制单（其他）",
            },
            {
              id: 37,
              label: "账户补贴制单（职保）",
            },
            {
              id: 38,
              label: "账户补贴制单（城居保）",
            },
            {
              id: 39,
              label: "账户利息制单",
            },
            {
              id: 40,
              label: "账户支出制单",
            },
            {
              id: 41,
              label: "账户结算制单（职保）",
            },
            {
              id: 42,
              label: "账户结算制单（城居保）",
            },
            {
              id: 43,
              label: "账户调整制单",
            },
          ],
        },
        {
          id: 7,
          label: "财务管理",
          children: [
            {
              id: 44,
              label: "账户补贴到账（其他）",
            },
            {
              id: 45,
              label: "账户补贴到账（职保）",
            },
            {
              id: 46,
              label: "账户补贴到账（城居保）",
            },
            {
              id: 47,
              label: "账户利息到账",
            },
            {
              id: 48,
              label: "帐户支出到账",
            },
            {
              id: 49,
              label: "账户结算到账（职保）",
            },
            {
              id: 50,
              label: "账户结算到账（城居保）",
            },
            {
              id: 51,
              label: "账户核算",
            },
            {
              id: 52,
              label: "账户调整到账",
            },
          ],
        },
        {
          id: 8,
          label: "查询统计",
          children: [
            {
              id: 53,
              label: "征地批文查询",
            },
            {
              id: 54,
              label: "征地人员统计",
            },
            {
              id: 55,
              label: "征地账户查询",
            },
            {
              id: 56,
              label: "操作历史查询",
            },
            {
              id: 57,
              label: "支出制单查询",
            },
          ],
        },
        {
          id: 9,
          label: "系统管理",
          children: [
            {
              id: 58,
              label: "操作管理",
            },
            {
              id: 59,
              label: "权限管理",
            },
            {
              id: 60,
              label: "性别",
            },
            {
              id: 61,
              label: "乡设置",
            },
            {
              id: 62,
              label: "村设置",
            },
            {
              id: 63,
              label: "角色设置",
            },
            {
              id: 64,
              label: "角色权限",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    submit() {
      API_GET_USER_LIST()
        .then((res) => {
          console.log(res);
          this.tableData = res.ResList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClick(row) {
      console.log(row);
      this.dialogVisible = true;
    },
    handleClose() {
      this.$confirm("确认修改？")
        .then((_) => {
          // done();
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "region" }]);
      }
      if (node.level > 1) return resolve([]);

      setTimeout(() => {
        const data = [
          {
            name: "leaf",
            leaf: true,
          },
          {
            name: "zone",
          },
        ];
        resolve(data);
      }, 500);
    },
  },
  created() {
    this.submit();
  },
};
</script>

<style scoped lang="scss">
.permissions {
  padding: 30px;
  .el-table {
    // max-width: 601px;
  }
}
</style>
